<template>
  <view>
    <view class="choose_card">
      <view class="title">接单期限<text>*</text></view>
      <view class="item">
        <view class="tit"></view>
        <view class="input">
          <uni-data-checkbox v-model="give_timesec" :localdata="give_timesec_list"></uni-data-checkbox>
        </view>
      </view>
    </view>
    <view class="choose_card">
      <view class="title">授课地址<text>*</text></view>
      <view class="item">
        <view class="tit">详细地址</view>
        <view class="input" @tap="chooseLocation">
          <view v-if="addr[0]===''">请选择地址</view>
          <view v-else>{{addr[0]}}{{addr[1]}}</view>
        </view>
      </view>
      <view class="item">
        <view class="tit">联系电话</view>
        <view class="input">
          <input type="text" v-model="mobile" placeholder="请输入联系电话"/>
        </view>
      </view>
    </view>

    <view class="choose_card">
      <view class="title">学生信息<text>*</text></view>
      <view class="item">
        <view class="tit">姓名</view>
        <view class="input">
          <input type="text" v-model="student" placeholder="请输入姓名"/>
        </view>
      </view>
      <view class="item">
        <view class="tit">性别</view>
        <view class="sex">
          <view :class="sex==='男'?'active':''" @tap="sex='男'">男</view>
          <view :class="sex==='女'?'active':''" @tap="sex='女'">女</view>
        </view>
      </view>
      <view class="item">
        <view class="tit">科目</view>
        <view class="input">
          <picker type="text" @change="subjectChange" :range="subject_list" range-key="name">{{subject!==''?subject_list[subject].name:'选科目'}}</picker>
        </view>
      </view>
      <view class="item" v-if="common.auditConfig.audit_on==0">
        <view class="tit">年级</view>
        <view class="input">
          <picker type="text" @change="gradeChange" :range="grade_list" range-key="name">{{grade!==''?grade_list[grade].name:'选年级'}}</picker>
        </view>
      </view>
      <view class="item">
        <view class="tit">学生基本情况</view>
        <view class="input">
          <input type="text" v-model="state" placeholder="请简单描述学生基本情况"/>
        </view>
      </view>
    </view>

    <view class="choose_card" v-if="common.auditConfig.audit_on==0">
      <view class="title">首次试课时间<text>*</text></view>
      <view class="item">
        <view class="tit">上课时间</view>
        <view class="input">
          <picker mode="date" @change="learnDateChange" :start="$xyfun.get_today()">
            <view class="picker">
              {{ learn_date!==''?learn_date:'请选择上课时间' }}
            </view>
          </picker>
        </view>
      </view>
      <view class="item">
        <view class="tit">具体时间</view>
        <view class="input">
          <picker mode="time" @change="learnTimeChange">
            <view class="picker">
              {{ learn_time!==''?learn_time:'请选择具体时间' }}
            </view>
          </picker>
        </view>
      </view>
      <view class="item" style="justify-content: flex-start;align-items: center;">
        <view class="tit">
          试课时间可商议
        </view>
        <view class="input" style="margin-left: 20rpx;margin-top: 4rpx;">
          <uni-data-checkbox multiple :value="teaching_method" v-model="teaching_method" :localdata="teaching_method_list"></uni-data-checkbox>
        </view>
      </view>
    </view>

    <view class="choose_card">
      <view class="title">老师要求<text>*</text></view>
      <view class="item">
        <view class="tit">老师性别</view>
        <view class="input">
          <picker type="text" @change="teacherSexChange" :value="teacher_sex" :range="teacher_sex_list">{{teacher_sex!==''?teacher_sex:'请选择老师性别'}}</picker>
        </view>
      </view>
      <view class="item" v-if="common.auditConfig.audit_on==0">
        <view class="tit">老师类型</view>
        <view class="input">
          <picker type="text" @change="teacherTypeChange" :value="teacher_type" :range="teacher_type_list">{{teacher_type!==''?teacher_type:'请选择老师类型'}}</picker>
        </view>
      </view>
      <view class="item">
        <view class="tit">对老师的要求</view>
        <view class="input">
          <input type="text" v-model='demand' style="width: 380rpx;" placeholder="请简单描述对老师的其他要求"/>
        </view>
      </view>
    </view>

    <view>
      <view class="submit" @tap="confirm">提交</view>
    </view>

    <view style="height: 100rpx;"></view>

    <payPop ref='payPop' title="请缴纳发布急招押金" @createOrder="createOrder"></payPop>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import Pay from "@/utils/pay";
import payPop from "@/components/paypop/index.vue";
import uniDataCheckbox from "@/components/uni-data-checkbox/index.vue";
export default {
  components: {uniDataCheckbox, payPop},
  data() {
    return {
      disable: false,

      give_timesec: '',
      give_timesec_list: [
        {
          text : '半小时',
          value : 'half_hour'
        },
        {
          text : '一小时',
          value : 'a_hour'
        },
        {
          text : '一天',
          value : 'a_day'
        },
        {
          text : '三天',
          value : 'three_day'
        },
        {
          text : '一周',
          value : 'a_week'
        }
      ],

      addr: ['','','',''],
      mobile : '',
      student : '',
      sex : '',
      grade: '',
      grade_list: [],
      subject: '',
      subject_list: [],
      state: '',
      learn_date :'',
      learn_time : '',
      teacher_sex : '',
      teacher_sex_list : ['男','女','不限'],
      teacher_type : '',
      teacher_type_list : [],
      teaching_method: [],
      teaching_method_list: [
        {
          text: '',
          value: 1

        }
      ],
      demand : '',

      order: {},
    };

  },
  computed: {
    ...mapState(['common'])
  },
  onLoad() {
    uni.showModal({
      title: '提示',
      content: this.common.customConfig.job_push_for_parent,
      confirmText: '我知道了',
      cancelText: '取消',
      success: function (r) {
      }
    });
    this.teacher_type_list = [...this.common.customConfig.settled_type_free,...this.common.customConfig.settled_type, ...['不限']]
    this.subject_list = this.common.customConfig.subject;
    this.grade_list = this.common.customConfig.grade_normal;
  },
  methods:{

    chooseLocation(){
      var that = this;
      uni.chooseLocation({
        success: res => {
          that.addr = [
            res.address,
            res.name,
            String(res.latitude),
            String(res.longitude)
          ];
        },
        fail: err => {
          console.log(err);
        }
      });
    },

    gradeChange(e){
      this.grade = e.detail.value;
    },

    subjectChange(e){
      this.subject = e.detail.value;
    },

    learnDateChange(e){
      this.learn_date = e.detail.value;
    },

    learnTimeChange(e){
      this.learn_time = e.detail.value;
    },

    teacherSexChange(e){
      this.teacher_sex = this.teacher_sex_list[e.detail.value];
    },

    teacherTypeChange(e){
      this.teacher_type = this.teacher_type_list[e.detail.value];
    },

    confirm(){
      var that = this;
      if(this.disable) return;

      if(this.common.auditConfig.audit_on==0){
        if(this.grade===''){
          this.$xyfun.msg('请选择年级');
          return;
        }
        if(this.subject===''){
          this.$xyfun.msg('请选择科目');
          return;
        }
      }

      this.disable = true;
      let fromData = {};
      fromData.give_timesec = this.give_timesec;
      fromData.addr = this.addr;
      fromData.mobile = this.mobile;
      fromData.student = this.student;
      fromData.sex = this.sex;
      fromData.grade = this.grade_list[this.grade].id;
      fromData.subject = this.subject_list[this.subject].id;
      fromData.state = this.state;
      fromData.learn_date = this.learn_date;
      fromData.learn_time = this.learn_time;
      fromData.teacher_sex = this.teacher_sex;
      fromData.teacher_type = this.teacher_type;
      fromData.demand = this.demand;
      fromData.can_discuss = this.teaching_method.length;

      this.$api.postBase({
        url : 'teacher_job/apply',
        loadingTip: '加载中...',
        data : fromData,
        success: res => {

          if(res.money) {
            that.order = res.order;
            that.$refs.payPop.showDiaLog(res.money)
          }
          // this.$xyfun.back('需求提交成功');
        },fail: res => {
          this.disable = false;
        }

      })
    },

    //创建订单
    createOrder(pay_type){
      var that = this;
      // 提交订单
      var pay = new Pay(pay_type, this.order, 'job');
      pay.payMehod().then((res)=>{
        that.disabled = false;
        that.$refs.payPop.disabled = false;
        that.$refs.payPop.buyModelShow = false;
        that.before_status = 1;
        uni.showModal({
          title: '提示',
          content: '您的急招申请已经发出!',
          showCancel: false,
          confirmText: '知道了',
          success: function (res) {
            that.$xyfun.to('/pages/job/quickly_push');
          }
        });
      },(res)=>{
        that.$refs.payPop.disabled = false;
        // if(pay_type != 'balance'){
        //   pay.payResult(res);
        // }
      });
    },
  },

}
</script>

<style lang="scss">

.submit{
  text-align: center;
  margin:40rpx 20rpx;
  background: #1c98c4;
  padding: 20rpx 0;
  color: #ffffff;
  border-radius: 8rpx;
}

.choose_card{
  padding: 0 20rpx;
  margin-top: 60rpx;
  .title{
    margin-bottom: 20rpx;
    font-size: 30rpx;
    margin-left: 10rpx;
    font-weight: bold;
    text{
      color: red;
      margin-left: 15rpx;

    }
  }
  .item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #ababab;
    min-height: 60rpx;
    line-height: 60rpx;
    margin: 20rpx 10rpx;
    padding-bottom: 10rpx;
    .tit{
      font-size: 26rpx;
      font-weight: bold;
    }
    .input{
      font-size: 26rpx;
      font-weight: bold;
      input{
        font-size: 26rpx;
        height: 60rpx;
        text-align: right;
      }
    }
    .sex{
      display: flex;
      view{
        background: #c9c9c9;
        width: 60rpx;
        margin-left: 40rpx;
        min-height: 60rpx;
        text-align: center;
        border-radius: 6rpx;
      }
      .active{
        background: #1c98c4;
        color: #fff;
      }
    }
    .avatar{
      button{
        width: 120rpx;
        height: 120rpx;
        padding: 0;
        margin: 0;
        border: none;
        image{
          width: 120rpx;
          height: 120rpx;
        }
      }
    }
  }
}
</style>
